<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/static/css/index.css" rel="stylesheet">
<title>我的通行记录</title>
<script src="/static/javascript/laydate.js"></script>
<style>
.img {
	width: 120px;
	height: 130px;
}
</style>
</head>
<body>

<div class="inner-title">
	<h3 class="fn f14"><img src="/static/images/icon-1.png" alt="" /> 我的通行记录</h3>
</div>

<div class="inner-cont">
	<div class="bgf2 creat-wrap">
		<div align="right" id="sel">
				<input type="text" name="begin" id="begin"/>至<input type="text" name="end" id="end"/><button onclick="getbytime();" type="button" class="creat-btn cf">查询</button>
			</div>
	</div>
	
	<div class="mt30">
		<table border="0"class="table">
			<tr>
			<th width="74" >序号</th>
			<th width="1000">时间</th>
			<th width="1000">现场照片</th>
			</tr>
			<tbody id="table">
			</tbody>
		</table>
		<div align="center" style="font-size: 18px; color: gray" id="page">

		</div>
	</div>
	
</div>





<script src="/static/js/jquery.js" type="text/javascript"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script type="text/javascript">

//执行一个laydate实例
laydate.render({
  elem: '#begin'
  //指定元素
});
laydate.render({
	  elem: '#end'
	  //指定元素
	});
	var count = 0;
	$(function() {
		$
				.ajax({
					url : "/web/getAlltravelRecords/1",
					success : function(response) {
						if (response.success) {
							$
									.each(
											response.data,
											function(i, eq) {
												count++;
												$("#table")
												.append(
														'<tr class="TR_STYLE1"><td class="TD_STYLE2">'
																+ count
																+ '</td><td class="TD_STYLE2">'
																+ eq.tTime
																+ '</td><td class="TD_STYLE2"><img class="img" src="/img/'+eq.strangerImg+'"/></td></td></tr>');


											});
							if (response.pagenum > 1) {
								for (var i = 1; i <= response.pagenum; i++) {
									if (i == 1) {
										$("#page").append(
												'<button type="button" style="margin-left: 30px" onclick="page(this);" value="'
														+ i
														+ '">首页</button>')
									} else if (i == response.pagenum) {
										$("#page").append(
												'<button type="button" style="margin-left: 30px" onclick="page(this);" value="'
														+ i
														+ '">尾页</button>')
									} else {
										$("#page").append(
												'<button type="button" style="margin-left: 30px" onclick="page(this);" value="'
														+ i + '">' + i
														+ '</button>')
									}
								}
							}
						}
					},
					error : function() {
					}

				});

	});
	function page(event) {
		var a = $(event).val();
		if (a == 1) {
			count = 0;
		} else {
			count = (a - 1) * 30
		}
		$
				.ajax({
					url : "/web/getAlltravelRecords/" + a,
					success : function(response) {
						if (response.success) {
							$("#table").empty();
							$
									.each(
											response.data,
											function(i, eq) {
												if (eq.eStatus != 2) {

													count++;
													$("#table")
													.append(
															'<tr class="TR_STYLE1"><td class="TD_STYLE2">'
																	+ count
																	+ '</td><td class="TD_STYLE2">'
																	+ eq.tTime
																	+ '</td><td class="TD_STYLE2"><img class="img" src="/img/'+eq.strangerImg+'"/></td></td></tr>');

												}
											});
							
						}
					},
					error : function() {
					}
				});
	}
	
	function getbytime() {
		count=0;
		var begin=$("#begin").val();
		var end=$("#end").val();
		$
		.ajax({
			url : "/web/geTravelRecordsbytimequantum/"+begin+"/"+end+"/1",
			success : function(response) {
				if (response.success) {
					$("#table").empty();
					$("#page").empty();
					$
							.each(
									response.data,
									function(i, eq) {
										if (eq.eStatus != 2) {

											count++;
											$("#table")
											.append(
													'<tr class="TR_STYLE1"><td class="TD_STYLE2">'
															+ count
															+ '</td><td class="TD_STYLE2">'
															+ eq.tTime
															+ '</td><td class="TD_STYLE2"><img class="img" src="/img/'+eq.strangerImg+'"/></td></td></tr>');

										}
									});
					if (response.pagenum > 1) {
						for (var i = 1; i <= response.pagenum; i++) {
							if (i == 1) {
								$("#page").append(
										'<button type="button" style="margin-left: 30px" onclick="getbytimepage(this);" value="'
												+ i
												+ '">首页</button>')
							} else if (i == response.pagenum) {
								$("#page").append(
										'<button type="button" style="margin-left: 30px" onclick="getbytimepage(this);" value="'
												+ i
												+ '">尾页</button>')
							} else {
								$("#page").append(
										'<button type="button" style="margin-left: 30px" onclick="getbytimepage(this);" value="'
												+ i + '">' + i
												+ '</button>')
							}
						}
					}
				}
			},
			error : function() {
			}
		});
	}
	
	function getbytimepage(event) {
		var a = $(event).val();
		var begin=$("#begin").val();
		var end=$("#end").val();
		if (a == 1) {
			count = 0;
		} else {
			count = (a - 1) * 30
		}
		$
				.ajax({
					url : "/web/geTravelRecordsbytimequantum/"+begin+"/"+end+"/"+a,
					success : function(response) {
						if (response.success) {
							$("#table").empty();
							$
									.each(
											response.data,
											function(i, eq) {
												if (eq.eStatus != 2) {

													count++;
													$("#table")
													.append(
															'<tr class="TR_STYLE1"><td class="TD_STYLE2">'
																	+ count
																	+ '</td><td class="TD_STYLE2">'
																	+ eq.tTime
																	+ '</td><td class="TD_STYLE2"><img class="img" src="/img/'+eq.strangerImg+'"/></td></td></tr>');

												}
											});
							
						}
					},
					error : function() {
					}
				});
	}
</script>
</body>
</html>